<template>
    <div class="login-wrapper">
        <div class="login-box">
            <h1 class="logo">登录</h1>
            <form @submit.prevent="login">
                <div class="input-group">
                    <input v-model="username" type="text" placeholder="用户名" class="input-field" required />
                </div>
                <div class="input-group">
                    <input v-model="password" type="password" placeholder="密码" class="input-field" required />
                </div>
                <div class="forgot-password">
                    <a href="#">忘记密码?</a>
                </div>
                <button type="submit" class="login-btn">登录</button>
                <div class="sign-up">
                    <p>没有账号? <a href="#">立即注册</a></p>
                </div>
            </form>
        </div>
    </div>
</template>

<script setup lang="ts">
import { RouterLink, useRouter } from 'vue-router';

let username = "";
let password = "";
let router = useRouter();

function login() {
    if (username && password) {
        alert("登录成功");
        router.push({ name: 'laberHome' })
    }

}
</script>
<style scoped>
/* 登录表单样式 */
.login-wrapper {
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.login-box {
    padding: 30px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    color: #333;
}

h1.logo {
    text-align: center;
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #4A90E2;
}

.input-group {
    margin-bottom: 20px;
}

.input-field {
    width: 100%;
    padding: 15px;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    font-size: 16px;
    transition: all 0.3s ease;
    background: #fafafa;
}

.input-field:focus {
    border-color: #4A90E2;
    outline: none;
    background: #ffffff;
}

.forgot-password {
    text-align: right;
    font-size: 14px;
    margin-bottom: 20px;
}

.forgot-password a {
    color: #4A90E2;
    text-decoration: none;
}

.forgot-password a:hover {
    text-decoration: underline;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background-color: #4A90E2;
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 18px;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.2s;
}

.login-btn:hover {
    background-color: #357ABD;
    transform: translateY(-2px);
}

.sign-up {
    text-align: center;
    font-size: 14px;
    margin-top: 20px;
}

.sign-up a {
    color: #4A90E2;
    text-decoration: none;
}

.sign-up a:hover {
    text-decoration: underline;
}
</style>